<script setup>
import titlelogo from '@/assets/img/titlebg/titlebg2.webp'
import img1 from '@/assets/img/superiority/introduce1.webp'
import img2 from '@/assets/img/superiority/introduce2.webp'
import img3 from '@/assets/img/superiority/introduce3.webp'
</script>
<template>
  <section class="superiority section">
    <container class="container superiority-container">
      <el-header>
        <el-image :src="titlelogo" class="titlelogo" />
        <h2 class="title">我们的优势</h2>
        <div class="subtitle">
          青少年科技教育培训机构，用良好的态度和教学服务，帮助孩子理解智能世界，驾驭未来世界
        </div>
      </el-header>

      <el-main>
        <el-row :gutter="12">
          <el-col class="right-col" :span="12">
            <el-card class="left-info">
              <template #header>
                <span class="info-title">老师面对面教学 小班式准确授课</span>
              </template>
              <el-image :src="img1" style="height: 323px" />
            </el-card>
          </el-col>

          <el-col
            class="left-col"
            :span="12"
            style="display: flex; flex-direction: column"
          >
            <el-card class="right-info">
              <el-image :src="img2" />
              <div class="content">
                <div class="info-title">有创造力的学习环境和学习氛围</div>
                <span class="desc">
                  具有未来感和想象力的学习环境
                  <br />
                  与同学们一起积极讨论，创造活跃的学习氛围
                </span>
              </div>
            </el-card>

            <el-card class="right-info">
              <el-image :src="img3" />
              <div class="content">
                <div class="info-title">教研团队 打造优良的教学品质</div>
                <span class="desc">
                  专业团队，为孩子提供专业指导
                  <br />
                  创造活跃的学习氛围
                </span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </container>
  </section>
</template>
<style lang="scss" scoped>
.superiority-container {
  display: flex;
  flex-direction: column;
  .left-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  // 卡片样式
  .el-card {
    :deep() {
      .el-card__header {
        padding-bottom: 1rem;
        border-bottom: none;
      }

      .info-title {
        white-space: nowrap;
        font-size: 1.25rem;
      }

      .info-title::before {
        display: inline-block;
        content: '';
        background-image: url('@/assets/img/superiority/left.webp');
        background-repeat: no-repeat;
        width: 4px;
        height: 28px;
        padding-right: 0.5rem;
        position: relative;
        top: 0.4rem;
      }
    }
  }

  // 左边卡片样式
  .left-info {
    :deep() {
      .el-card__header {
        position: relative;
        left: 1rem;
      }
      .el-card__body {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .el-image {
      top: -0.5rem;
    }
  }

  // 右边卡片样式
  .right-info {
    :deep() {
      .el-card__body {
        display: flex;
        padding: 0;
      }

      .el-image {
        margin-right: 5%;
      }

      .info-title {
        margin: 1.5rem 0;
      }

      .desc {
        font-size: 14px;
        line-height: 26px;
        color: rgb(153, 153, 153);
      }
    }
  }
}
</style>
